<!-- 签约申请界面 -->
<template>
    <div class="MyContainer">
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="name" label="用户姓名" width="150" />
            <el-table-column prop="sex" label="用户性别" width="100" />
            <el-table-column prop="age" label="用户年龄" width="100" />
            <el-table-column prop="address" label="用户地址" width="300" />
            <el-table-column prop="phone" label="联系电话" width="200"/> 
            
            <!-- （需修改）查看详情:跳转到用户的健康档案界面，此时还没有签约 -->
            <el-table-column prop="detail" label="详细信息" width="200"> 
                <router-link :to="{path:''}">查看详情</router-link>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                    <!-- 医生同意之后需要将用户信息录入签约用户当中 -->
                    <el-button text @click="open1" link type="primary">同意</el-button>
                    <!-- 医生拒绝之后直接整行删除 -->
                    <el-button link type="primary" @click.prevent="deleteRow(scope.$index)">拒绝</el-button>
                </template>
            </el-table-column>

        </el-table>

    </div>
</template>

<script setup lang="ts" name="contracted-user">
import dayjs from 'dayjs'
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const input = ref('')

//定义表格数据类型
interface TableItem {
    name:string,
    sex:string,
    age:string,
    address:string,
    phone:string,
}
const now = new Date()

const tableData = ref<TableItem[]>([]);
// 获取表格数据
const getData = () => {
    tableData.value = [
        {
            name:'小明',
            sex:'男',
            age:'20',
            address:'武汉',
            phone:'13324226666',
        },
        {
            name:'小明',
            sex:'男',
            age:'20',
            address:'武汉',
            phone:'13324226666',
        },
        {
            name:'小明',
            sex:'男',
            age:'20',
            address:'武汉',
            phone:'13324226666',
        },
    ];
};
getData();

//点击同意之后的弹窗提示
const open1 = () => {
  ElMessageBox.confirm(
    '是否确定同意该用户签约申请',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

//点击拒绝之后的弹窗提示以及删除操作
const deleteRow = (index: number) => {
    ElMessageBox.confirm(
    '是否确定拒绝该用户签约申请',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
      tableData.value.splice(index, 1)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
    
}


</script>

<style scoped>

</style>
